/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  ExclamationCircleOutlined,
  LinkOutlined,
  PlusCircleOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  Input,
  Select,
  Tooltip,
  message,
  Checkbox,
  Modal,
  Spin,
  InputNumber,
} from 'antd';
import router from 'umi/router';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/utils/utils.less';
import HOCSelect from '@/components/AntDesign/Select';
import Policy from '../../components/PolicyDetail';
import Customer from '../../components/Customer';
import Area from '../../components/Area';
import BankForm from './Bank';

const { Option } = Select;
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const { confirm } = Modal;
@connect(({ singlemanage, loading }) => ({
  singlemanage,
  loading: loading.models.singlemanage || loading.models.publicdata,
  formFieldsValue: singlemanage.formFieldsValue,
  expandForm: singlemanage.expandForm,
  pageData: singlemanage.pageData,
  activeKey: singlemanage.activeKey,
}))
@Form.create()
class AdvancedForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      payWayList: [], // 支付方式列表
      YES_NO_FLAG: [], // 是否开户完成
      bankList: [], // 字典银行列表
      bankAccoList: [], // 下拉列表中客户银行账户信息
      entpTypeList: [], // 开户企业类型下拉列表
      custId: '', // 客户名称id
      socialList: [], // 社保组合数据
      insUnify: {}, // 五险合不合一数据
      selectedAreaId: '', // 选中的地区id
      plainOptions: [], // 缴纳险种集合
      plcyId: '', // 社保组合id
      policyVisible: 'false', // 政策弹框变量
      updateModVisible: 'false', // 新增银行弹框变量
      accuOrIns: '1', // 社保传1 ， 公积金传2
      payWay: '3', // 支付方式默认的
      ratioValStatus: null,
      ratioValHelp: null,
    };
  }

  componentDidMount() {
    // 获取页面所有的字典值
    this.setState({ isdoneFlag: '1' });
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: [
        'ACCO_PAY_WAY',
        'BANK_ID',
        'PAY_FEES_WAY',
        'BIZ_INS_TYPE',
        'YES_NO_FLAG',
        'ENTP_TYPE',
      ],
    }).then(data => {
      if (data && data.ACCO_PAY_WAY && data.ACCO_PAY_WAY.length) {
        this.setState({ payWayList: data.ACCO_PAY_WAY });
      }
      if (data && data.YES_NO_FLAG && data.YES_NO_FLAG.length) {
        this.setState({ YES_NO_FLAG: data.YES_NO_FLAG });
      }
      if (data && data.BANK_ID && data.BANK_ID.length) {
        this.setState({ bankList: data.BANK_ID });
      }
      if (data && data.ENTP_TYPE && data.ENTP_TYPE.length) {
        this.setState({ entpTypeList: data.ENTP_TYPE });
      }
      if (data && data.BIZ_INS_TYPE && data.BIZ_INS_TYPE.length) {
        data.BIZ_INS_TYPE.map(item => {
          const temp = item;
          temp.label = item.itemName;
          temp.value = item.itemCode;
        });
        this.setState({ plainOptions: data.BIZ_INS_TYPE });
      }
      if (data && data.PAY_FEES_WAY && data.PAY_FEES_WAY.length) {
        data.PAY_FEES_WAY.forEach(item => {
          if (item.itemName === '单立户') {
            this.setState({ payWay: item.itemCode });
          }
        });
      }
    });
  }

  // 模糊查询 (客户名称)
  getData = value => {
    const { dispatch, form } = this.props;
    const { bankList } = this.state;
    this.setState({ custId: value });
    form.resetFields(['custBankId']); // 重置上一次带出的银行账户信息
    // 获取统一社会信用代码数据
    dispatch({
      type: 'singlemanage/getUniCreditCode',
      payload: {
        custId: value,
      },
    }).then(response => {
      if (response.success && response.data) {
        form.setFieldsValue({ uniCreditCode: response.data.uniCreditCode });
        this.setState({ mdCustId: response.data.mdCustId });
      } else {
        message.warning(response.message || '获取统一社会信用代码失败：服务器端错误');
      }
    });
    // 获取银行账户信息数据
    dispatch({
      type: 'singlemanage/getBankAccoList',
      payload: {
        custId: value,
      },
    }).then(response => {
      if (response.success && response.data && response.data.length) {
        const bankAccoList = [];
        response.data.map(item => {
          const temp = item;
          temp.bankId = this.matchDict(bankList, item.bankId);
          const bankInfo = `${item.bankId} ${item.bankAcco}`;
          const { bankAccoId } = item;
          bankAccoList.push({ bankAccoId, bankInfo });
        });
        this.setState({ bankAccoList });
      }
    });
  };

  // 模糊查询 (地区)
  getAreaData = value => {
    const { dispatch, form } = this.props;
    const { payWay } = this.state;
    this.setState({ selectedAreaId: value.key, plcyId: '' });
    form.resetFields(['plcyId']); // 重置上一次带出的社保组合id
    dispatch({
      type: 'singlemanage/getInsLsPkgName',
      payload: {
        payWay,
        areaId: value.key,
      },
    }).then(response => {
      if (response.success && response.data && response.data.length) {
        this.setState({ socialList: response.data });
      } else {
        this.setState({ socialList: [] });
      }
    });
    dispatch({
      type: 'singlemanage/getQueryPlcyParam',
      payload: {
        areaId: value.key,
      },
    }).then(response => {
      if (response.success) {
        this.setState({ insUnify: response.data });
        form.resetFields(['doneFlag']);
        if (response.success && !response.data.areaId) {
          message.warning('根据地区获取不到是否五险合一规则，请联系平台管理员配置。');
        }
      } else {
        this.setState({ insUnify: {} });
        form.resetFields(['doneFlag']);
      }
    });
  };

  // 匹配字典
  matchDict = (list, id) => {
    let dict = null;
    list.map(item => {
      if (Number(item.itemCode) === id) {
        dict = item.itemName;
      }
    });
    return dict;
  };

  // 选择缴纳险种
  selectInsu = checkedList => {
    if (checkedList.indexOf('5') > -1) {
      this.setState({ isShowGS: true });
    } else {
      this.setState({ isShowGS: false });
    }
  };

  // 选择是否开户完成
  isdoneFlag = e => {
    console.log(e,'e.key');
    this.setState({ isdoneFlag: e });
  };

  // 选中支付方式
  selectPayWay = value => {
    this.setState({ payWay: value });
  };

  // 提交
  submitAll = url => {
    const { dispatch, form } = this.props;
    const { insUnify, mdCustId } = this.state;
    form.validateFields((err, values) => {
      const temp = values;
      if (!err) {
        let param = null;
        let areaId = null;
        if (values.areaId) {
          areaId = values.areaId && values.areaId.key;
          delete temp.areaId;
        }
        if (insUnify.insUnifyFlag === 1) {
          param = {
            ...values,
            mdCustId,
            insKinds: '1',
            areaId,
          };
        } else {
          param = {
            ...values,
            mdCustId,
            insKinds: values.insKinds.join(','),
            areaId,
          };
        }
        dispatch({
          type: 'singlemanage/checkBefInsert',
          payload: param,
        }).then(res => {
          if (res.success) {
            if (res.data) {
              confirm({
                icon: <QuestionCircleOutlined />,
                title: '是否继续添加?',
                content: res.data,
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                  let urlName = null;
                  if (url === '/custInsAcco/insert') {
                    urlName = 'singlemanage/custInsInsert';
                  } else {
                    urlName = 'singlemanage/custInsBeginUse';
                  }
                  dispatch({
                    type: urlName,
                    payload: param,
                  }).then(result => {
                    if (result.success) {
                      this.setState({ subFlg: true });
                      message.success('新增成功', 2, () => {
                        dispatch({
                          type: 'singlemanage/updateModelData',
                          payload: {
                            activeKey: '1',
                            formFieldsValue: {}, // 表单域
                            expandForm: false, // 展开收起
                            pageData: {
                              pagination: {
                                current: 1,
                                pageSize: 10,
                                total: 10,
                              },
                            },
                          },
                        });
                        router.push('/customservicemanage/singleaccount/index');
                      });
                    } else {
                      message.warning(`${result.message || '社保新增失败：服务器端错误'}`);
                    }
                  });
                },
              });
            } else {
              let urlName = null;
              if (url === '/custInsAcco/insert') {
                urlName = 'singlemanage/custInsInsert';
              } else {
                urlName = 'singlemanage/custInsBeginUse';
              }
              dispatch({
                type: urlName,
                payload: param,
              }).then(result => {
                if (result.success) {
                  this.setState({ subFlg: true });
                  message.success('新增成功', 2, () => {
                    dispatch({
                      type: 'singlemanage/updateModelData',
                      payload: {
                        activeKey: '1',
                        formFieldsValue: {}, // 表单域
                        expandForm: false, // 展开收起
                        pageData: {
                          pagination: {
                            current: 1,
                            pageSize: 10,
                            total: 10,
                          },
                        },
                      },
                    });
                    router.push('/customservicemanage/singleaccount/index');
                  });
                } else {
                  message.warning(`${result.message || '社保新增失败：服务器端错误'}`);
                }
              });
            }
          } else {
            message.warning(res.message || '提交数据失败：服务器端错误');
          }
        });
      }
    });
  };

  // 增加银行
  setModalShow = () => {
    this.setState({ updateModVisible: 'true' });
  };

  // 传给银行子组件的函数
  cancelModal = (modalClose, success) => {
    this.setState({ updateModVisible: modalClose });
    const { dispatch } = this.props;
    const { custId, bankList } = this.state;
    if (success) {
      dispatch({
        type: 'singlemanage/getBankAccoList',
        payload: {
          custId,
        },
      }).then(response => {
        if (response.success && response.data && response.data.length) {
          const bankAccoList = [];
          response.data.map(item => {
            const temp = item;
            temp.bankId = this.matchDict(bankList, item.bankId);
            const bankInfo = `${item.bankId} ${item.bankAcco}`;
            const { bankAccoId } = item;
            bankAccoList.push({ bankAccoId, bankInfo });
          });
          this.setState({ bankAccoList });
        } else {
          message.warning(response.message || '获取银行账户信息失败：服务器端错误');
        }
      });
    }
  };

  // 弹出政策详情
  setPolicyModalShow = () => {
    this.setState({ policyVisible: 'true' });
  };

  // 传给政策子组件的函数
  cancelPolicyModal = modalClose => {
    this.setState({ policyVisible: modalClose });
  };

  // 取消
  cancel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'singlemanage/updateModelData',
      payload: {
        activeKey: '1',
        formFieldsValue: {}, // 表单域
        expandForm: false, // 展开收起
        pageData: {
          pagination: {
            current: 1,
            pageSize: 10,
            total: 10,
          },
        },
      },
    });
    router.push('/customservicemanage/singleaccount/index');
  };

  // 校验工伤比例
  handleCheckRatio = (rules, value, callback) => {
    let ratioValStatus = null;
    let ratioValHelp = null;
    const reg = /^-?\d+\.?\d{0,4}$/;
    if (!reg.test(value)) {
      ratioValHelp = '请输入小数点不超过4位的数字';
      ratioValStatus = 'error';
      callback(new Error('请输入小数点不超过4位的数字'));
    } else if (value === 0) {
      callback();
    } else if (value < 0.01) {
      ratioValHelp = '工伤比例小于了0.01%，请确认是否填写的正确';
      ratioValStatus = 'warning';
      // callback(new Error('工伤比例小于了0.01%，请确认是否填写的正确'));
      callback();
    } else {
      callback();
    }
    this.setState({
      ratioValStatus,
      ratioValHelp,
    });
  };

  // 渲染函数
  render() {
    const {
      payWayList,
      YES_NO_FLAG,
      bankAccoList,
      socialList,
      custId,
      selectedAreaId,
      plainOptions,
      policyVisible,
      updateModVisible,
      plcyId,
      accuOrIns,
      isShowGS,
      isdoneFlag,
      subFlg,
      insUnify,
      subProhibit,
      entpTypeList,
    } = this.state;
    const {
      form: { getFieldDecorator },
      submitting,
      loading,
    } = this.props;
    return (
      <Form layout="vertical">
        <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
          <Spin tip="Loading..." spinning={loading}>
            <Card
              title={<span style={{ fontWeight: 'bolder' }}>社保账户信息</span>}
              className={styles.card}
              bordered={false}
            >
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="客户名称">
                    {getFieldDecorator('custId', {
                      rules: [{ required: true, message: '请输入' }],
                    })(<Customer getData={this.getData} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="社保账户名称">
                    {getFieldDecorator('accoName', {
                      rules: [{ required: true, pattern:/^(?!\.)[^\\/:*?"<>|]{1,255}$/,message: '文件名不能包含下列任何字符  \\  /  :  *   ?  "  <  >  |'}],
                    })(<Input placeholder="请输入" maxLength={100} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="统一社会信用代码">
                    {getFieldDecorator('uniCreditCode', {
                      rules: [
                        {
                          required: true,
                          message: '长度为18位的数字与字母组合',
                          pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{18}$/,
                        },
                      ],
                    })(<Input placeholder="请输入" disabled />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="地区">
                    {getFieldDecorator('areaId', {
                      rules: [{ required: true, message: '请选择' }],
                    })(<Area onSelect={this.getAreaData} labelInValue />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="单位名称">
                    {getFieldDecorator('orgName', {
                      rules: [{ required: true, message: '请输入' }],
                    })(<Input placeholder="请输入" maxLength={100} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="所属社保机构">
                    {getFieldDecorator('insOrg', {
                      rules: [{ required: true, message: '请输入' }],
                    })(<Input placeholder="请输入" maxLength={100} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="支付方式">
                    {getFieldDecorator('payWay', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      // <Select showSearch placeholder="请选择" onChange={this.selectPayWay}>
                      //   {payWayList.map(item => (
                      //     <Option key={item.itemCode}>{item.itemName}</Option>
                      //   ))}
                      // </Select>
                      <HOCSelect
                        placeholder="请选择"
                        showSearch
                        allowClear
                        optionFilterProp="children"
                        onChange={this.selectPayWay}
                      >
                        {payWayList.map(item => (
                          <Option key={item.itemCode}>{item.itemName}</Option>
                        ))}
                      </HOCSelect>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <Col span={22} style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}>
                    <FormItem label="银行账户信息">
                      {getFieldDecorator('custBankId', {
                        rules: [{ required: false, message: '请输入' }],
                      })(
                        <HOCSelect
                          placeholder="请选择"
                          showSearch
                          allowClear
                        >
                          {bankAccoList.map(item => (
                            <Option key={item.bankAccoId}>{item.bankInfo}</Option>
                          ))}
                        </HOCSelect>
                        // <Select showSearch placeholder="请选择">
                        //   {bankAccoList.map(item => (
                        //     <Option key={item.bankAccoId}>{item.bankInfo}</Option>
                        //   ))}
                        // </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col
                    span={1}
                    offset={1}
                    style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}
                  >
                    <FormItem>
                      {custId ? (
                        <PlusCircleOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: '#40a9ff',
                            fontSize: '24px',
                          }}
                          onClick={this.setModalShow}
                        />
                      ) : (
                        <PlusCircleOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: 'rgb(206, 206, 206)',
                            fontSize: '24px',
                          }}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem
                    label={
                      <Tooltip
                        placement="right"
                        title="实际业务情况中该账户未开户完成，可以使用是否开户完成功能进行标记。后续开户完成时，进行修改取消标记即可。针对工伤险种，取消未开户完成标记时，需维护工伤比例信息。"
                      >
                        <span>是否开户完成</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                  >
                    {getFieldDecorator('doneFlag', {
                      rules: [{ required: false, message: '请输入' }],
                      initialValue: isdoneFlag,
                    })(
                      <HOCSelect
                        placeholder="请选择"
                        showSearch
                        allowClear
                        optionFilterProp="children"
                        onChange={this.isdoneFlag}
                      >
                        {YES_NO_FLAG.map(item => (
                          <Option key={item.itemCode}>{item.itemName}</Option>
                        ))}
                      </HOCSelect>
                      // <Select showSearch placeholder="请选择" onChange={this.isdoneFlag}>
                      //   {YES_NO_FLAG.map(item => (
                      //     <Option key={item.itemCode}>{item.itemName}</Option>
                      //   ))}
                      // </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={64}>
                {insUnify.insUnifyFlag === 2 ? (
                  <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                    <FormItem
                      label={
                        <Tooltip
                          placement="right"
                          title="五险不合一的地区需根据险种的申报政策来选择险种，如果每个险种的申报政策（包括申报时间和回盘时间）都不同则只能单选并分别创建5个单立户，如果其中有两个险种的申报政策是完全相同的，比如医疗和生育，则可以复选，险种组合一旦选中并生效不可以再做修改。"
                        >
                          <span>缴纳险种</span>
                          <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                        </Tooltip>
                      }
                    >
                      {getFieldDecorator('insKinds', {
                        rules: [{ required: true, message: '请选择' }],
                      })(<CheckboxGroup options={plainOptions} onChange={this.selectInsu} />)}
                    </FormItem>
                  </Col>
                ) : null}
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <Col span={22} style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}>
                    <FormItem label="社保组合">
                      {getFieldDecorator('plcyId', {
                        rules: [{ required: true, message: '请选择' }],
                      })(
                        <HOCSelect
                          placeholder="请选择"
                          showSearch
                          allowClear
                          optionFilterProp="children"
                          onSelect={value => {
                          this.setState({ plcyId: value });
                        }}
                        >
                          {socialList.map(item => (
                            <Option key={item.insLsPkgId}>{item.insLsPkgName}</Option>
                          ))}
                        </HOCSelect>
                        // <Select
                        //   placeholder="请选择"
                        //   onSelect={value => {
                        //     this.setState({ plcyId: value });
                        //   }}
                        // >
                        //   {socialList.map(item => (
                        //     <Option key={item.insLsPkgId}>{item.insLsPkgName}</Option>
                        //   ))}
                        // </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col
                    span={1}
                    offset={1}
                    style={{ paddingLeft: 0, paddingRight: 0, float: 'left' }}
                  >
                    <FormItem>
                      {plcyId ? (
                        <LinkOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: '#40a9ff',
                            fontSize: '24px',
                          }}
                          onClick={this.setPolicyModalShow}
                        />
                      ) : (
                        <LinkOutlined
                          style={{
                            width: '100%',
                            marginTop: 33,
                            color: 'rgb(206, 206, 206)',
                            fontSize: '24px',
                          }}
                        />
                      )}
                    </FormItem>
                  </Col>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="开户企业类型">
                    {getFieldDecorator('entpType', {
                      rules: [{ required: true, message: '请选择开户企业类型' }],
                    })(
                      <HOCSelect
                        placeholder="请选择开户企业类型"
                        showSearch
                        allowClear
                        optionFilterProp="children"
                      >
                        {entpTypeList &&
                          entpTypeList.length > 0 &&
                          entpTypeList.map(item => (
                            <option key={item.itemCode}>{item.itemName}</option>
                          ))}
                      </HOCSelect>
                      // <Select showSearch placeholder="请选择开户企业类型">
                      //   {entpTypeList &&
                      //     entpTypeList.length > 0 &&
                      //     entpTypeList.map(item => (
                      //       <option key={item.itemCode}>{item.itemName}</option>
                      //     ))}
                      // </Select>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="备注">
                    {getFieldDecorator('remark')(<Input placeholder="请输入" maxLength={200} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  {insUnify.insUnifyFlag === 1 && isdoneFlag === '1' ? (
                    <Row>
                      <Col xl={{ span: 22 }} lg={{ span: 22 }} md={{ span: 22 }} sm={20}>
                        <FormItem
                          label="企业工伤比例"
                          validateFirst
                          validateStatus={this.state.ratioValStatus}
                          help={this.state.ratioValHelp}
                        >
                          {getFieldDecorator('ratioVal', {
                            rules: [
                              {
                                type: 'number',
                                required: true,
                                validator: (rules, value, callback) => {
                                  this.handleCheckRatio(rules, value, callback);
                                },
                              },
                            ],
                          })(
                            <InputNumber
                              placeholder="请输入"
                              min={0}
                              max={99.9999}
                              style={{ width: '100%' }}
                            />
                          )}
                        </FormItem>
                      </Col>
                      <Col xl={{ span: 1 }} lg={{ span: 1 }} md={{ span: 1 }} sm={2}>
                        <FormItem>
                          <span style={{ marginTop: 34, display: 'block', marginLeft: 20 }}>%</span>
                        </FormItem>
                      </Col>
                    </Row>
                  ) : null}
                </Col>
              </Row>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                {isShowGS && insUnify.insUnifyFlag === 2 && isdoneFlag === '1' ? (
                  <Row>
                    <Col xl={{ span: 22 }} lg={{ span: 22 }} md={{ span: 22 }} sm={20}>
                      <FormItem
                        label="企业工伤比例"
                        validateStatus={this.state.ratioValStatus}
                        help={this.state.ratioValHelp}
                      >
                        {getFieldDecorator('ratioVal', {
                          rules: [
                            {
                              type: 'number',
                              required: true,
                              validator: (rules, value, callback) => {
                                this.handleCheckRatio(rules, value, callback);
                              },
                            },
                          ],
                        })(
                          <InputNumber
                            placeholder="请输入"
                            min={0}
                            max={99.9999}
                            style={{ width: '100%' }}
                          />
                        )}
                      </FormItem>
                    </Col>
                    <Col xl={{ span: 1 }} lg={{ span: 1 }} md={{ span: 1 }} sm={2}>
                      <FormItem>
                        <span style={{ marginTop: 34, display: 'block', marginLeft: 20 }}>%</span>
                      </FormItem>
                    </Col>
                  </Row>
                ) : null}
              </Col>
            </Card>
            {updateModVisible === 'true' ? (
              <BankForm custId={custId} cancelModal={this.cancelModal} />
            ) : null}
            {policyVisible === 'true' ? (
              <Policy
                plcyId={plcyId}
                accuOrIns={accuOrIns}
                areaId={selectedAreaId}
                socialData={socialList}
                cancelPolicyModal={modalClose => this.cancelPolicyModal(modalClose)}
              />
            ) : null}
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={this.cancel} style={{ marginRight: 10 }}>
                取消
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.submitAll('/custInsAcco/insert');
                }}
                loading={submitting}
                disabled={subFlg || subProhibit}
              >
                提交
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.submitAll('/custInsAcco/insertAndBeginUse');
                }}
                loading={submitting}
                disabled={subFlg || subProhibit}
              >
                提交并启用
              </Button>
            </FooterToolbar>
          </Spin>
        </PageHeaderWrapper>
      </Form>
    );
  }
}
export default AdvancedForm;
